<template>
<div class="content">
    <div class="info-box">
        <div class="steps-box">
            <el-steps :active="4" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="品类/尺寸"></el-step>
                <el-step title="盒型"></el-step>
                <el-step title="色系"></el-step>
                <el-step title="包装体现"></el-step>
                <el-step title="工艺"></el-step>
            </el-steps>
        </div>
        

        <el-form ref="form" :model="prodictInfo" label-width="80px" :rules="regRules">
            <el-form-item label="包装体现" prop="packagingReflectsList">
                <el-checkbox-group v-model="prodictInfo.packagingReflectsList">
                    <el-checkbox v-for="(item,index) in packData" :key="index" :label=item.dictValue>{{item.dictLabel}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <div class="button-box">
            <el-button type="primary" @click="nextStep">下一步</el-button>
        </div>
    </div> 
</div>
</template>

<script>
import {getDicts} from "@/api/design/dict/data"
export default {
    data() {
        return {
			productDictVo:{
				list:[],
				parentId:null
			},
            packData:[],
            prodictInfo:{
                packagingReflectsList:[]
            },
            regRules:{
                packagingReflectsList: [
                    { type: 'array', required: true, message: '请至少选择一个包装体现', trigger: 'change' }
                ],
            }
        }
    },
    methods: {
        nextStep(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$router.push(
                        {
                            path:'/crafts', 
                            query: {
                                userName: this.prodictInfo.userName,
                                sex:this.prodictInfo.sex,
                                age:this.prodictInfo.age,
                                solarFilm:this.prodictInfo.solarFilm,
                                solarFilmSize:this.prodictInfo.solarFilmSize,
                                colorChangeFilm:this.prodictInfo.colorChangeFilm,
                                colorChangeFilmSize:this.prodictInfo.colorChangeFilmSize,
                                lacquerFilm:this.prodictInfo.lacquerFilm,
                                lacquerFilmSize:this.prodictInfo.lacquerFilmSize,
                                boxType:this.prodictInfo.boxType,
                                color:this.prodictInfo.color,
                                colorCustomize:this.prodictInfo.colorCustomize,
                                colorProportion:this.prodictInfo.colorProportion,
                                colorProportionCustomize:this.prodictInfo.colorProportionCustomize,
                                style:this.prodictInfo.style,
                                styleCustomize:this.prodictInfo.styleCustomize,
                                packagingReflectsList:this.prodictInfo.packagingReflectsList,
                            }
                        }
                    )
                }
            })



            
        }
    },
    created() {
        this.prodictInfo.userName = this.$route.query.userName
        this.prodictInfo.sex = this.$route.query.sex
        this.prodictInfo.age = this.$route.query.age
        this.prodictInfo.solarFilm = this.$route.query.solarFilm
        this.prodictInfo.solarFilmSize = this.$route.query.solarFilmSize
        this.prodictInfo.colorChangeFilm = this.$route.query.colorChangeFilm
        this.prodictInfo.colorChangeFilmSize = this.$route.query.colorChangeFilmSize
        this.prodictInfo.lacquerFilm = this.$route.query.lacquerFilm
        this.prodictInfo.lacquerFilmSize = this.$route.query.lacquerFilmSize
        this.prodictInfo.boxType = this.$route.query.boxType
        this.prodictInfo.color = this.$route.query.color
        this.prodictInfo.colorCustomize = this.$route.query.colorCustomize
        this.prodictInfo.colorProportion = this.$route.query.colorProportion
        this.prodictInfo.colorProportionCustomize = this.$route.query.colorProportionCustomize
        this.prodictInfo.style = this.$route.query.style
        this.prodictInfo.styleCustomize = this.$route.query.styleCustomize
		this.productDictVo.list.push("packaging_reflects")
		this.parentId=0
        getDicts(this.productDictVo).then(res => {
            this.packData = res.data
        })
    },
}
</script>

<style scoped>
.content{
    width: 100%;
    height: 100%;
    padding-top: 10px;
}
.info-box{
    margin-top: 20px;
}
.steps-box{
    margin-bottom: 50px;
}
::v-deep .el-step__title{
    font-size: 14px;
}
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.button-box{
    display: flex;
    justify-content: center;
    margin-top: 10%;
}
</style>